<template>
  <div class="app-container2 model_creatd_warp">
    <div class="left_box">
      <commonTree2 />
    </div>
    <div class="right_box">
      <div class="right_main">
        <div class="right_main_top">
          <div class="common_title_wrap">
            <div class="common_title_btn">加载层级模型</div>
          </div>
          <div class="right_content_wrap">
            <treeChart :treeChartData="treeChartData" />
          </div>
        </div>
        <div class="right_main_center">
          <div class="center_items11">
            <div class="common_title_wrap">
              <div class="common_title_btn">加载判断矩阵</div>
            </div>
            <div class="items11_content">
              <div class="duizhanbiao_table">
                <el-table
                  height="style"
                  border
                  ref="tableRef"
                  class="jk_common_table004"
                  :data="tableData"
                  style="width: 100%; height: 100%"
                >
                  <el-table-column prop="name" label=""></el-table-column>
                  <el-table-column
                    v-for="item in tableData"
                    :key="item.id"
                    :label="item.name"
                  >
                    <template slot-scope="scope">
                      <div
                        class="table_checkout_box"
                        v-if="
                          checkoutTableItemFn(item.id, scope.row.checkIdArr)
                        "
                      >
                        <div class="icon el-icon-check"></div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="center_items11">
            <div class="common_title_wrap">
              <div class="common_title_btn">一致性检验</div>
            </div>
            <div class="items11_content">
              <div class="common_main_scrollbar_content">
                <el-scrollbar class="el-scrollbar-bai"> </el-scrollbar>
              </div>
            </div>
          </div>
        </div>
        <div class="right_main_bottom">
          <div class="common_title_wrap">
            <div class="common_title_btn">加载层级模型</div>
            <div class="common_title_other">
              <div class="other_search_wrap">
                <div class="search_name">模型名称:</div>
                <div class="search_ipt">
                  <el-input
                    class="js_common_input"
                    v-model="modelVal"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
              <div class="common_title_btn">评估模型保存</div>
            </div>
          </div>
          <div class="right_content_wrap">
            <div class="common_main_scrollbar_content">
              <el-scrollbar class="el-scrollbar-bai"> </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import commonTree2 from "../../../components/commonTree2";
import treeChart from "../moxingweihu/components/treeChart.vue";
export default {
  data() {
    return {
      modelVal: "",
      tableData: [
        {
          id: "1",
          name: "因子1",
          checkIdArr: ["2"],
        },
        {
          id: "2",
          name: "因子2",
          checkIdArr: ["4"],
        },
        {
          id: "3",
          name: "因子3",
          checkIdArr: ["2"],
        },
        {
          id: "4",
          name: "因子4",
          checkIdArr: ["2"],
        },
        {
          id: "5",
          name: "因子5",
          checkIdArr: ["2"],
        },
        {
          id: "6",
          name: "因子6",
          checkIdArr: ["2"],
        },
      ],
      treeChartData: [
        {
          name: "xx设备健康度",
          relationType: 0,
          children: [
            {
              name: "因子1",
            },
            {
              name: "因子2",
            },
            {
              name: "因子3",
            },
            {
              name: "因子4",
            },
            {
              name: "因子5",
            },
            {
              name: "因子6",
            },
            {
              name: "因子7",
            },
            {
              name: "因子8",
            },
            {
              name: "因子M",
            },
          ],
        },
      ],
    };
  },
  components: { treeChart, commonTree2 },
  methods: {
    checkoutTableItemFn(id, checkIdArr) {
      let flag = checkIdArr.some((item) => {
        return item === id;
      });
      return flag;
    },
    resizeFn() {
      this.$nextTick(() => {
        let lastColEl = document.querySelector(
          ".el-table__header colgroup col:last-child"
        );
        console.log(lastColEl.width);
        if (lastColEl) {
          // 最后一列的宽度加上滚动条的宽度
          lastColEl.width = 8; // 6为滚动条宽度
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$modelCreatebgColor: #0e2141;
.model_creatd_warp {
  width: 100%;
  display: flex;
  .left_box {
    flex: 0 0 auto;
  }
  .right_box {
    margin-left: 20px;
    width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    .right_main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .right_main_top,
      .right_main_bottom {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 2px solid #21569f;
      }
      .right_main_top {
        flex: 0 0 auto;
        height: 260px;
        display: flex;
        flex-direction: column;
        .right_content_wrap {
          flex: 1 1 auto;
          width: 100%;
          background-color: $modelCreatebgColor;
        }
      }
      .right_main_center {
        flex: 5 1 auto;
        display: flex;
        margin: 16px 0;
        height: 0;
        justify-content: space-between;
        .center_items11 {
          width: 48%;
          height: 100%;
          box-sizing: border-box;
          border: 2px solid #21569f;
          display: flex;
          flex-direction: column;
          .items11_content {
            flex: 1 1 auto;
            width: 100%;
            height: 0;
            background-color: $modelCreatebgColor;
          }
        }
      }
      .right_main_bottom {
        flex: 4 1 auto;
        width: 100%;
        height: 0;
        .right_content_wrap {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
          background: $modelCreatebgColor;
        }
      }
      .common_title_wrap {
        flex: 0 0 auto;
        width: 100%;
        height: 62px;
        background: linear-gradient(to bottom, #134183, #113b78);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 20px;
        .common_title_btn {
          width: 160px;
          text-align: center;
          font-size: 20px;
          height: 32px;
          line-height: 32px;
          color: #ccc;
          background: linear-gradient(to right, #247ab7, #279cce, #247ab7);
          cursor: pointer;
          &:hover {
            opacity: 0.9;
          }
        }
        .common_title_other {
          display: flex;
          align-items: center;
          .other_search_wrap {
            display: flex;
            align-items: center;
            margin-right: 100px;
            .search_name {
              color: #ccc;
              font-size: 20px;
              margin-right: 8px;
            }
          }
        }
      }
      .common_main_scrollbar_content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
        font-size: 20px;
        color: #ccc;
        line-height: 32px;
        background: linear-gradient(to bottom, #12315e, #154173);
      }
      .duizhanbiao_table {
        width: 100%;
        height: 100%;
        background: #122b56;
        .table_checkout_box {
          display: flex;
          align-items: center;
          justify-content: center;
          .icon {
            font-weight: 700;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
